<template>
	<view class="detail">

		<!-- 顶部栏start -->

		<view>
			<u-navbar back-text="返回" title="商品详情"></u-navbar>
			
			<view class="content">
				<!-- 正文内容 -->

				<!-- 顶部栏end -->
				<!-- 商品图片 -->
				<image :src="list.large_img" mode="widthFix" class="bigImg"></image>
				<!-- 商品详情start -->
				<view class="product">
					<!-- 标题start -->
					<view class="product-title">
						<view class="names">
							<view class="name">
								{{list.name}}
							</view>
							<view class="enname">
								{{list.enname}}
							</view>
						</view>
						<view class="price">
							￥{{list.price}}
						</view>
					</view>
					<!-- 标题 end -->
					<!-- 温度糖度内容start -->
					<view class="temSugar">
						<!-- 温度 start -->
						<view class="tem-box boxs" v-show="temList.list!=''">
							<view class="desc">
								{{list.tem_desc}}
							</view>
							<view class="tem items" v-for="(item,index) in temList.list"
								:class="{active:index==temList.selectIndex}" @click="clickTem(index,temList)">
								{{item}}
							</view>
						</view>
						<!-- 温度 end -->
						<!-- 糖度 start -->
						<view class="sugar-box boxs" v-show="sugarList.list!=''">
							<view class="desc">
								{{list.sugar_desc}}
							</view>
							<view class="sugar items" v-for="(item,index) in sugarList.list"
								@click="clickTem(index,sugarList)" :class="{active:index==sugarList.selectIndex}">
								{{item}}
							</view>
						</view>
						<!-- 糖度 end  -->
						<!-- 奶油 start -->
						<view class="cream-box boxs" v-show="creamList.list!=''">
							<view class="desc">
								{{list.cream_desc}}
							</view>
							<view class="cream items" v-for="(item,index) in creamList.list"
								@click="clickTem(index,creamList)" :class="{active:index==creamList.selectIndex}">
								{{item}}
							</view>
						</view>
						<!-- 奶油 end -->
						<!-- 奶start -->
						<view class="milk-box boxs" v-show="milkList.list!=''">
							<view class="desc">
								{{list.milk_desc}}
							</view>
							<view class="milk items" v-for="(item,index) in milkList.list"
								@click="clickTem(index,milkList)" :class="{active:index==milkList.selectIndex}">
								{{item}}
							</view>
						</view>
						<!-- 奶end -->
					</view>
					<!-- 温度糖度内容end -->

					<!-- 选择数量 sart -->
					<view class="num-box">
						<view class="num-desc">
							选择数量
						</view>
						<view class="num-select">
							<u-number-box v-model="value" @change="valChange" :min="1"></u-number-box>
							<!-- <view @click="decrement" class="decrement btn">
						-
					</view>
					<view class="counter">
						{{num}}
					</view>
					<view @click="increment" class="increment btn">+</view>
 -->
						</view>
					</view>
					<!-- 选择数量 end -->
					<!-- 商品描述 -->
					<view class="product-desc">
						<view class="">
							商品描述
						</view>
						<view class="desc">
							<view class="desc-items" v-for="(item,index) in descList">
								{{index+1}}.{{item}}

							</view>
						</view>
					</view>
				</view>
				<!-- 商品详情end -->
				<!-- 底部栏 start -->
				<view class="bottom-nav">
					<!-- 
			custom-style 自定义样式 格式 :custom-style="{'':''}"
			<uni-badge size="small" :text="1" absolute="rightTop"
			:custom-style="{'backgroundColor':'#0c34ba','color':'#fff','width':'20rpx'}">
			</uni-badge>
	-->
					<view class="shopbar">

						<u-icon name="bag-fill" color="#0c34ba" size="32"></u-icon>
						<view class="">
							购物袋
						</view>

					</view>

					<view class="collect">
						<u-icon name="heart-fill" size="32" color="#0c34ba"></u-icon>
						<view class="">
							已收藏
						</view>

					</view>
					<view class="right">
						<view class="add-cart" @click="addCart">
							加入购物车
						</view>
						<view class="buy">
							立即购买
						</view>
					</view>
				</view>

				<!-- 底部栏 end -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: "",
				temList: {
					'selectIndex': 0
				},
				sugarList: {
					'selectIndex': 0
				},
				creamList: {
					'selectIndex': 0
				},
				milkList: {
					'selectIndex': 0
				},
				// 选择数量
				// num: 1,
				value: 1,
				// 商品描述
				descList: ""
			}
		},
		methods: {
			// 获取商品详情数据
			getDetail(pid) {
				uni.request({
					url: "http://www.kangliuyong.com:10002/productDetail",
					data: {
						appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
						pid: pid
					},
					success: (res) => {

						this.list = res.data.result[0];
						console.log(this.list);
						// 选择参数
						this.temList['list'] = this.splitArr(this.list.tem);
						this.sugarList['list'] = this.splitArr(this.list.sugar);
						this.creamList['list'] = this.splitArr(this.list.cream);
						this.milkList['list'] = this.splitArr(this.list.milk);
						// 商品描述
						this.descList = this.list.desc.split("\n");
					}
				})

			},
			// 把字符串切割成数组 /
			splitArr(strs) {
				// console.log(strs.split("/"));
				return strs.split("/")
			},

			// 点击温度糖度切换样式
			clickTem(index, list) {
				// console.log(index)
				// 对应数组的index变化
				list.selectIndex = index

			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},

			// 返回上一级
			goBack() {
				uni.navigateBack({
					delta: 1,
					success: () => {
						this.productList = ''
					}
				})
			},
			// 加入购物车
			addCart() {
				uni.showToast({
					title: "成功加入购物袋"
				})
			}

		},

		onLoad(option) {
			// console.log(option.pid)
			this.getDetail(option.pid)
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f7f7f7;

	}

	.detail {

		height: 188vh;

		::v-deep .u-back-text{
			color: #0c43ba !important;
		}
		::v-deep .uicon-nav-back{
			color: #0c43ba !important;
		}
		.bigImg {

			width: 100%;
		}

		// 商品详情
		.product {
			position: relative;
			background-color: #fff;
			width: 700rpx;
			margin: -40rpx auto 200rpx;
			margin-bottom: 400rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 40rpx;
			box-sizing: border-box;

			// 标题
			.product-title {
				display: flex;
				justify-content: space-between;

				.names {
					.name {

						color: #646566;
						font-size: 45rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.enname {
						width: 280rpx;
						height: 40rpx;
						color: #999999;
						font-size: 30rpx;

						text-align: start;
						display: -webkit-box;
						white-space: pre-wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

				}

				.price {
					font-size: 40rpx;
					color: #0c34ba;
					font-weight: bold;
				}
			}

			// 温度糖度
			.temSugar {
				padding: 40rpx 0;
				border-bottom: 2rpx solid #ccc;

				.boxs {
					display: flex;
					margin-top: 20rpx;

					.desc {
						margin-right: 40rpx;
						width: 110rpx;
						color: #646566;
						font-size: 34rpx;
					}

					.items {
						width: 130rpx;
						height: 55rpx;
						margin-right: 20rpx;
						border-radius: 50rpx;
						background-color: #e8e8e8;
						text-align: center;
						color: #646566;
						font-size: 30rpx;
						line-height: 55rpx;

					}
				}
			}

			// 选择数量
			.num-box {
				border-bottom: 2rpx solid #ccc;
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;

				.num-desc {
					font-size: 34rpx;
					color: #646566;
				}

				::v-deep .u-icon-plus {
					width: 50rpx;
					color: #fff !important;
					border-radius: 50%;
					background-color: #0c34ba !important;
				}

				::v-deep .u-icon-minus {
					width: 50rpx;
					color: #b8c3eb !important;
					border-radius: 50%;
					border: 2rpx solid #b8c3eb;
					background-color: #fff !important;
				}

				::v-deep .uni-input-input {
					background-color: #fff !important;
				}
			}

			// 商品描述
			.product-desc {
				font-size: 34rpx;
				padding: 30rpx 0 0;
				color: #646566;

				.desc-items {
					font-size: 30rpx;
					margin: 20rpx 0;
					color: #999999;
				}
			}

		}

		// 底部栏
		.bottom-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 110rpx;
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			justify-items: center;
			box-sizing: border-box;

			.shopbar {
				position: relative;
				text-align: center;
				font-size: 24rpx;

				.num {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background-color: #0c34ba;
					top: 0rpx;
					right: 20rpx;
					color: #fff;
					line-height: 20rpx;

				}

				.img {
					width: 35rpx;

				}
			}

			.collect {
				text-align: center;
				font-size: 24rpx;
				margin: 0 20rpx 20rpx 0;
			}

			.right {
				width: 500rpx;
				height: 70rpx;
				border-radius: 50rpx;
				overflow: hidden;
				display: flex;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				font-size: 35rpx;

				.add-cart {
					width: 50%;
					// height: 100%;
					background-color: #6a91ec;
				}

				.buy {
					// z-index: 9999;
					width: 50%;
					height: 100%;
					background-color: #0c34ba;

				}
			}
		}
	}

	.active {
		background-color: #0c34ba !important;
		color: #fff !important;
	}
</style>
